<template>
  <div
    :id="id"
    style="width:100;height:600px"
  >

  </div>
</template>

<script>
/****
 *  1、引入echarts
 *  2、获取地址位置信息  经纬度范围  阿里datav 获取数据
 *     http://datav.aliyun.com/portal/school/atlas/area_selector
 *  3、根据获取经纬度信息 画出地图轮廓
 *  4、在对应的地理位置上标注数据信息  全国大学分布情况
 *
 *
 *
 */
import * as echarts from 'echarts'
export default {
  // 地图轮廓数据 mapData
  // 标注数据  data
  props: {
    id: {
      type: String,
      default: 'map1'
    },
    title: {
      type: String,
      default: '全国高校分布情况'
    },
    subTitle: {
      type: String,
      default: '数据来源：教育部'
    },
    mapData: {
      type: Object,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    min: {
      type: Number,
      default: 5
    },
    max: {
      type: Number,
      default: 150
    },
    color: {
      type: Array,
      default: () => {
        return ['red', '#89eb9f', 'green']
      }
    },
    formatter: {
      type: String,
      default: '{b}<br/>{c}所'
    }
  },
  mounted() {
    this.loadMap()
  },
  methods: {
    loadMap() {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option
      myChart.showLoading()
      // 请求必须添加代理标识 才能够被代理服务器识别 需要代理请求
      // this.$http.get('/api/examples/data/asset/geo/HK.json').then((res) => {
      // this.$http.get('http://127.0.0.1:3000/china').then((res) => {
      console.log(this.mapData)
      myChart.hideLoading()
      echarts.registerMap('China', this.mapData)
      myChart.setOption(
        (option = {
          title: {
            text: this.title,
            subtext: this.subTitle
          },
          tooltip: {
            trigger: 'item',
            formatter: this.formatter
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            // 设置数据的最小值和最大值
            min: this.min,
            max: this.max,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
              // 最小值到最大值的颜色范围
              color: this.color
            }
          },
          series: [
            {
              type: 'map',
              map: 'China',
              top: 200,
              zoom: 1.6,
              roam: true, //是否开启平游或缩放
              scaleLimit: {
                //滚轮缩放的极限控制
                min: 1,
                max: 10
              },
              label: {
                show: true
              },
              data: [...this.data, { name: '台湾省', value: 20 }]
            }
          ]
        })
      )
      // })
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>